// 设置系统演示组件
// 用于展示设置系统的各项功能

import React, { useState } from 'react';
import { Settings, Play, CheckCircle } from 'lucide-react';
import { useSettings } from '../../hooks/useSettings';
import { SettingsCategory } from '../../types/settings';

export const SettingsDemo: React.FC = () => {
  const { openSettings, getSetting, setSetting } = useSettings();
  const [demoStep, setDemoStep] = useState(0);

  const demoSteps = [
    {
      title: '打开设置对话框',
      description: '点击设置按钮打开设置界面',
      action: () => openSettings(SettingsCategory.Editor),
      completed: false
    },
    {
      title: '修改编辑器字体大小',
      description: '将字体大小改为16px',
      action: () => setSetting('editor.fontSize', 16),
      completed: false
    },
    {
      title: '切换主题',
      description: '将主题切换为深色模式',
      action: () => setSetting('appearance.theme', 'dark'),
      completed: false
    },
    {
      title: '自定义强调色',
      description: '设置自定义强调色',
      action: () => setSetting('appearance.accentColor', '#00D4AA'),
      completed: false
    },
    {
      title: '启用自动保存',
      description: '启用编辑器自动保存功能',
      action: () => setSetting('editor.autoSave', true),
      completed: false
    }
  ];

  const runDemo = async () => {
    for (let i = 0; i < demoSteps.length; i++) {
      setDemoStep(i);
      await new Promise(resolve => setTimeout(resolve, 1000));
      demoSteps[i].action();
      demoSteps[i].completed = true;
      await new Promise(resolve => setTimeout(resolve, 500));
    }
    setDemoStep(demoSteps.length);
  };

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
      <div className="text-center mb-8">
        <div className="flex items-center justify-center space-x-2 mb-4">
          <Settings className="w-8 h-8 text-blue-600" />
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
            设置系统演示
          </h2>
        </div>
        <p className="text-gray-600 dark:text-gray-400">
          体验 CodeGraph 编辑器的强大设置功能
        </p>
      </div>

      {/* 功能特性 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
          <h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
            🎨 界面自定义
          </h3>
          <p className="text-sm text-blue-700 dark:text-blue-300">
            主题、颜色、布局完全可定制
          </p>
        </div>
        
        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
          <h3 className="font-semibold text-green-900 dark:text-green-100 mb-2">
            ⚡ 实时预览
          </h3>
          <p className="text-sm text-green-700 dark:text-green-300">
            设置更改即时生效，所见即所得
          </p>
        </div>
        
        <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
          <h3 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">
            🔍 智能搜索
          </h3>
          <p className="text-sm text-purple-700 dark:text-purple-300">
            快速找到需要的设置项
          </p>
        </div>
        
        <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
          <h3 className="font-semibold text-orange-900 dark:text-orange-100 mb-2">
            📁 导入导出
          </h3>
          <p className="text-sm text-orange-700 dark:text-orange-300">
            备份和共享配置文件
          </p>
        </div>
      </div>

      {/* 演示步骤 */}
      <div className="mb-8">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          演示步骤
        </h3>
        <div className="space-y-3">
          {demoSteps.map((step, index) => (
            <div
              key={index}
              className={`flex items-center space-x-3 p-3 rounded-lg transition-colors ${
                index === demoStep
                  ? 'bg-blue-100 dark:bg-blue-900/30'
                  : step.completed
                  ? 'bg-green-100 dark:bg-green-900/30'
                  : 'bg-gray-100 dark:bg-gray-800'
              }`}
            >
              <div className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center ${
                step.completed
                  ? 'bg-green-600 text-white'
                  : index === demoStep
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-400 text-white'
              }`}>
                {step.completed ? (
                  <CheckCircle className="w-4 h-4" />
                ) : (
                  <span className="text-xs font-bold">{index + 1}</span>
                )}
              </div>
              <div className="flex-1">
                <div className="font-medium text-gray-900 dark:text-white">
                  {step.title}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  {step.description}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="flex justify-center space-x-4">
        <button
          onClick={runDemo}
          disabled={demoStep < demoSteps.length && demoStep > 0}
          className="flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <Play className="w-4 h-4" />
          <span>开始演示</span>
        </button>
        
        <button
          onClick={() => openSettings()}
          className="flex items-center space-x-2 px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
        >
          <Settings className="w-4 h-4" />
          <span>打开设置</span>
        </button>
      </div>

      {/* 当前设置状态 */}
      <div className="mt-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <h4 className="font-semibold text-gray-900 dark:text-white mb-3">
          当前设置状态
        </h4>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-gray-600 dark:text-gray-400">字体大小:</span>
            <span className="ml-2 font-mono text-gray-900 dark:text-white">
              {getSetting('editor.fontSize', 14)}px
            </span>
          </div>
          <div>
            <span className="text-gray-600 dark:text-gray-400">主题:</span>
            <span className="ml-2 font-mono text-gray-900 dark:text-white">
              {getSetting('appearance.theme', 'auto')}
            </span>
          </div>
          <div>
            <span className="text-gray-600 dark:text-gray-400">强调色:</span>
            <div className="inline-flex items-center ml-2">
              <div
                className="w-4 h-4 rounded border border-gray-300 mr-1"
                style={{ backgroundColor: getSetting('appearance.accentColor', '#007ACC') }}
              />
              <span className="font-mono text-gray-900 dark:text-white">
                {getSetting('appearance.accentColor', '#007ACC')}
              </span>
            </div>
          </div>
          <div>
            <span className="text-gray-600 dark:text-gray-400">自动保存:</span>
            <span className="ml-2 font-mono text-gray-900 dark:text-white">
              {getSetting('editor.autoSave', true) ? '启用' : '禁用'}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};
